<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title></title>
		<style>
			div,
			input,
			ol,
			li {
				padding: 0px;
				margin: 0px;
				list-style: none;
			}

			#list {
				width: 300px;
				padding: 10px;
				box-sizing: border-box;
				border: 1px solid black;
			}

			#input1 {
				display: block;
				margin-bottom: 5px;
				width: 100%;
				height: 20px;
			}

			#ol {
				width: 100%;
				border: 1px solid grey;
				opacity: 0;
				padding:0px 10px;
				box-sizing: border-box;
			}
			li:hover{
				background-color: lightgray;
			}
			
		</style>
	</head>
	<body>
		<div id="list">
			<input type="text" id="input1" />
			<ol id="ol"></ol>
		</div>
	</body>
	<script>
		const ol = document.getElementById("ol");
		const input1 = document.getElementById("input1")
		const searchList = ["美女", "美的", "美食", "美人鱼", "美女头像图片", "美国", "美元对人民币汇率", "美金", "美元兑人民币汇率",
			"美股", "美的空调售后服务", "美的将提供岗位2000余个", "美的空调售后服务电话24小时", "美的股票", "美的冰箱维修24小时上门服务",
			"美的空调", "美的冰箱", "美的电风扇", "美的质量", "美的冰箱怎么调温度冷冻和冷藏智能", "美的冰箱图片及价格","美股保障"
		]
		function change(){
			input1.value=this.innerText;
			search()//改变后就触发
		}
	
		function createList(arr) {
			ol.innerHTML = "";
			for (var obj1 of arr) {
				var li = document.createElement("li");
				li.innerText = obj1;
				li.onclick=change
				ol.appendChild(li)
			}
			ol.style.opacity=1;
			
		}

		function search() {
			var str = input1.value;
			var arr = searchList.filter((tempstr) => {
				var reg = new RegExp(`^${str}`);
				return reg.test(tempstr)
			})
			if (str.length == 0||arr.length==0) {
				ol.innerHTML = "";
				ol.style.opacity=0;
				return 0;
			}
			createList(arr)
		}
		input1.oninput = search;
		// 5、实时搜索建议?
		// 题目：创建一个搜索框，当用户输入内容时，实时从一个预设的数据集（如商品名称数组）中匹配相关结果，
		// 并通过 DOM 操作在搜索框下方展示匹配的搜索建议列表。用户点击搜索建议时，将建议内容填充到搜索框中。?
		// 提示：利用input事件监听搜索框内容变化，使用filter方法对数据集进行筛选，
		// 通过createElement动态创建列表项展示搜索建议，为列表项添加点击事件来更新搜索框内容。
	</script>
</html>